<template>
	<view class="content">
		<scroll-view style="height: calc(100vh - 40rpx);" scroll-y="true" @scrolltolower="lower">
		<view class="list" v-for="(item, index) in list" :key="index" @click="jumpPage(item)">
			<view class="item">
				<image class="image" :src="item.image"></image>
				<view class="right">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="bottom">
						<view class="">
							作者：{{ item.author }}
						</view>
						<view class="">
							<span>
								{{ item.view_total}}
							</span>
							阅读
						</view>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			lower() {
				this.$emit('lower')
			},
			jumpPage(val) {
				console.log(val);
				uni.navigateTo({
					url: '/pages/client/contribute-detail?id='+val.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-size: initial;
	}

	.content {
		padding: 20rpx 10rpx;

		.list {
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				padding: 10rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.image {
					width: 254rpx;
					height: 172rpx;
				}

				.right {
					width: calc(100% - 264rpx);
					height: 172rpx;

					.title {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #47464C;
						height: 140rpx;
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						view {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #AF97A1;

							span {
								color: #F75581;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>